import { formItem, required, rules, useForm } from '@/hooks/useForm';
import { Form, Input } from 'antd';
import { CSSProperties, FC, useEffect } from 'react';
import FormItem from '../FormItem';

class Config {
  @formItem(<Input />)
  @rules(required('请输入标题内容'))
  label?: string;

  @formItem(<span />)
  value?: string;
}

interface OptionItemProps {
  value?: any;
  onChange?: Function;
  father?: any;
}

const OptionItem: FC<OptionItemProps> = (props) => {
  const { value, onChange, father } = props;

  const form = useForm({
    config: Config,
    onChange,
    father,
  });

  useEffect(() => {
    form.setFormData(value);
  }, [value]);

  const { formItem, error } = form.items?.[0] || {};

  return <FormItem error={error}>{formItem}</FormItem>;
};

export default OptionItem;
